<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>警告提示 Alert | Vue Amazing UI</title>
    <meta name="description" content="Amazing UI 组件库">
    <link rel="preload stylesheet" href="/vue-amazing-ui/assets/style.c92aeb20.css" as="style">
    
    <script type="module" src="/vue-amazing-ui/assets/app.2703d87f.js"></script>
    <link rel="preload" href="/vue-amazing-ui/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/vue-amazing-ui/assets/chunks/framework.8dab348a.js">
    <link rel="modulepreload" href="/vue-amazing-ui/assets/chunks/theme.efad120a.js">
    <link rel="modulepreload" href="/vue-amazing-ui/assets/chunks/effect-fade.3fc1bc0e.js">
    <link rel="modulepreload" href="/vue-amazing-ui/assets/chunks/index.11fe8007.js">
    <link rel="modulepreload" href="/vue-amazing-ui/assets/guide_components_alert.md.ef6f8f48.lean.js">
    <link rel="icon" type="image/svg+xml" href="https://cn.vitejs.dev/viteconf.svg">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-5a346dfe><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5a346dfe data-v-ae24b3ad><div class="VPNavBar has-sidebar" data-v-ae24b3ad data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/vue-amazing-ui/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/vue-amazing-ui/amazing-icon.svg" alt data-v-8426fc1a><!--]--><!--[-->Vue Amazing UI<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!--[--><!----><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a0fd61f4 data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/vue-amazing-ui/guide/features.html" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>组件</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-amazing-ui/utils/started.html" tabindex="0" data-v-7f418b0f data-v-42ef59de><!--[--><span data-v-42ef59de>工具</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-9c007e85><span class="text" data-v-9c007e85><!----><span data-v-9c007e85>链接</span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-9c007e85><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://github.com/themusecatcher" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->My Github<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://blog.csdn.net/Dandrose?type=blog" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->My CSDN<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://themusecatcher.github.io/front-end-notes/" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->Front-end Notes<!--]--></a></div><!--]--><!--[--><div class="VPMenuGroup" data-v-e7ea1737 data-v-69e747b5><!----><!--[--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://cn.vuejs.org/" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->vue<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://vitepress.dev/" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->vitepress<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-69e747b5 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://markdown.com.cn/" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->markdown<!--]--></a></div><!--]--><!--]--></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-e6aabb21 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/themusecatcher/vue-amazing-ui" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>Appearance</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/themusecatcher/vue-amazing-ui" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-5a346dfe data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-5a346dfe data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>指引</h2><!----></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/features.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>特性</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/started.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>快速上手</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>组件</h2><!----></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/alert.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>警告提示 Alert</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/avatar.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>头像 Avatar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/backtop.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>回到顶部 BackTop</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/badge.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>徽标数 Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/breadcrumb.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>面包屑 Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/button.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>按钮 Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/card.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>卡片 Card</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/carousel.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>走马灯 Carousel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/cascader.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>级联选择 Cascader</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/checkbox.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>多选框 Checkbox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/collapse.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>折叠面板 Collapse</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/countdown.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>倒计时 Countdown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/datepicker.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>日期选择 DatePicker</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/descriptions.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>描述列表 Descriptions</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/dialog.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>对话框 Dialog</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/divider.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>分割线 Divider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/drawer.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>抽屉 Drawer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/ellipsis.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文本省略 Ellipsis</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/empty.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>空状态 Empty</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/flex.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>弹性布局 Flex</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/grid.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>栅格 Grid</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/image.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>图片 Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/input.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>输入框 Input</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/inputnumber.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数字输入框 InputNumber</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/message.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>全局提示 Message</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/modal.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>信息提示 Modal</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/notification.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>通知提醒 Notification</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/numberanimation.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>数值动画 NumberAnimation</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/pagination.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>分页 Pagination</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/popconfirm.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>弹出确认 Popconfirm</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/progress.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>进度条 Progress</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/qrcode.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>二维码 QRCode</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/radio.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>单选框 Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/rate.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>评分 Rate</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/result.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>结果 Result</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/select.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>选择器 Select</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/slider.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>滑动输入条 Slider</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/space.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>间距 Space</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/spin.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>加载中 Spin</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/statistic.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>统计数值 Statistic</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/steps.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>步骤条 Steps</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/swiper.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>触摸滑动插件 Swiper</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/switch.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>开关 Switch</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/table.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>表格 Table</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/tabs.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>标签页 Tabs</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/tag.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>标签 Tag</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/textarea.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文本域 Textarea</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/textscroll.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文字滚动 TextScroll</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/timeline.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>时间轴 Timeline</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/tooltip.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>文字提示 Tooltip</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/upload.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>上传 Upload</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/video.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>播放器 Video</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/vue-amazing-ui/guide/components/waterfall.html" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>瀑布流 Waterfall</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5a346dfe data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _vue-amazing-ui_guide_components_alert" data-v-6b87e69f><div><h1 id="警告提示-alert" tabindex="-1">警告提示 Alert<div class="m-backtop" style="bottom:40px;right:40px;display:none;" data-v-05696e1d data-v-05696e1d><!--[--><span class="m-icon" data-v-05696e1d><svg class="u-icon" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xlinkHref="http://www.w3.org/1999/xlink" data-v-05696e1d><g stroke="none" stroke-width="1" fill-rule="evenodd" data-v-05696e1d><g transform="translate(-139.000000, -4423.000000)" fill-rule="nonzero" data-v-05696e1d><g transform="translate(120.000000, 4285.000000)" data-v-05696e1d><g transform="translate(7.000000, 126.000000)" data-v-05696e1d><g transform="translate(24.000000, 24.000000) scale(1, -1) translate(-24.000000, -24.000000) translate(12.000000, 12.000000)" data-v-05696e1d><g transform="translate(4.000000, 2.000000)" data-v-05696e1d><path d="M8,0 C8.51283584,0 8.93550716,0.38604019 8.99327227,0.883378875 L9,1 L9,10.584 L12.2928932,7.29289322 C12.6834175,6.90236893 13.3165825,6.90236893 13.7071068,7.29289322 C14.0675907,7.65337718 14.0953203,8.22060824 13.7902954,8.61289944 L13.7071068,8.70710678 L8.70710678,13.7071068 L8.62544899,13.7803112 L8.618,13.784 L8.59530661,13.8036654 L8.4840621,13.8753288 L8.37133602,13.9287745 L8.22929083,13.9735893 L8.14346259,13.9897165 L8.03324678,13.9994506 L7.9137692,13.9962979 L7.77070917,13.9735893 L7.6583843,13.9401293 L7.57677845,13.9063266 L7.47929125,13.8540045 L7.4048407,13.8036865 L7.38131006,13.7856883 C7.35030318,13.7612383 7.32077858,13.7349921 7.29289322,13.7071068 L2.29289322,8.70710678 L2.20970461,8.61289944 C1.90467972,8.22060824 1.93240926,7.65337718 2.29289322,7.29289322 C2.65337718,6.93240926 3.22060824,6.90467972 3.61289944,7.20970461 L3.70710678,7.29289322 L7,10.585 L7,1 L7.00672773,0.883378875 C7.06449284,0.38604019 7.48716416,0 8,0 Z" data-v-05696e1d></path><path d="M14.9333333,15.9994506 C15.5224371,15.9994506 16,16.4471659 16,16.9994506 C16,17.5122865 15.5882238,17.9349578 15.0577292,17.9927229 L14.9333333,17.9994506 L1.06666667,17.9994506 C0.477562934,17.9994506 0,17.5517354 0,16.9994506 C0,16.4866148 0.411776203,16.0639435 0.9422708,16.0061783 L1.06666667,15.9994506 L14.9333333,15.9994506 Z" data-v-05696e1d></path></g></g></g></g></g></g></svg></span><!--]--></div> <a class="header-anchor" href="#警告提示-alert" aria-label="Permalink to &quot;警告提示 Alert&lt;BackTop /&gt;&quot;">​</a></h1><br><p><em>警告提示，展现需要关注的信息</em></p><h2 id="何时使用" tabindex="-1">何时使用 <a class="header-anchor" href="#何时使用" aria-label="Permalink to &quot;何时使用&quot;">​</a></h2><ul><li>当某个页面需要向用户显示警告的信息时</li><li>非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭</li></ul><h2 id="共有四种样式-success、info、warning、error" tabindex="-1">共有四种样式 success、info、warning、error <a class="header-anchor" href="#共有四种样式-success、info、warning、error" aria-label="Permalink to &quot;共有四种样式 success、info、warning、error&quot;">​</a></h2><div class="m-space vertical stretch wrap" style="width:100%;gap:8px;margin-bottom:-0px;" data-v-15e6c265><!--[--><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert info width-description" data-v-e2a4ec13><!----><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Info Text<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[--><!--]--></div></div><!----></div></div><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert success width-description" data-v-e2a4ec13><!----><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Success Text<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[--><!--]--></div></div><!----></div></div><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert warning width-description" data-v-e2a4ec13><!----><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Warning Text<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[--><!--]--></div></div><!----></div></div><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert error width-description" data-v-e2a4ec13><!----><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Error Text<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[--><!--]--></div></div><!----></div></div><!--]--></div><details class="details custom-block"><summary>Show Code</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#FDAEB7;font-style:italic;">Space</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">direction</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;vertical&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">align</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;stretch&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">style</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;width: 100%&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Info Text&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Success Text&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;success&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Warning Text&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;warning&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Error Text&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;error&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;/</span><span style="color:#FDAEB7;font-style:italic;">Space</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#B31D28;font-style:italic;">Space</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">direction</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;vertical&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">align</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;stretch&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">style</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;width: 100%&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Info Text&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Success Text&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;success&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Warning Text&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;warning&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Error Text&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;error&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;/</span><span style="color:#B31D28;font-style:italic;">Space</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div></details><h2 id="可关闭的警告提示" tabindex="-1">可关闭的警告提示 <a class="header-anchor" href="#可关闭的警告提示" aria-label="Permalink to &quot;可关闭的警告提示&quot;">​</a></h2><div class="m-space vertical stretch wrap" style="width:100%;gap:8px;margin-bottom:-0px;" data-v-15e6c265><!--[--><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert warning width-description" data-v-e2a4ec13><!----><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Warning Text Warning Text Warning Text Warning Text Warning Text Warning Text Warning Text<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[--><!--]--></div></div><a class="m-close" data-v-e2a4ec13><!--[--><svg focusable="false" class="u-close" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" data-v-e2a4ec13><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" data-v-e2a4ec13></path></svg><!--]--></a></div></div><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert error width-description" data-v-e2a4ec13><!----><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Error Text<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[-->Error Description Error Description Error Description Error Description Error Description Error Description<!--]--></div></div><a class="m-close" data-v-e2a4ec13><!--[--><svg focusable="false" class="u-close" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" data-v-e2a4ec13><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" data-v-e2a4ec13></path></svg><!--]--></a></div></div><!--]--></div><details class="details custom-block"><summary>Show Code</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">lang</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;ts&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">function</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">onClose</span><span style="color:#E1E4E8;"> (</span><span style="color:#FFAB70;">e</span><span style="color:#F97583;">:</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">MouseEvent</span><span style="color:#E1E4E8;">) {</span></span>
<span class="line"><span style="color:#E1E4E8;">  console.</span><span style="color:#B392F0;">log</span><span style="color:#E1E4E8;">(e, </span><span style="color:#9ECBFF;">&#39;I was closed.&#39;</span><span style="color:#E1E4E8;">)</span></span>
<span class="line"><span style="color:#E1E4E8;">}</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#FDAEB7;font-style:italic;">Space</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">direction</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;vertical&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">align</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;stretch&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">style</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;width: 100%&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Warning Text Warning Text Warning Text Warning Text Warning Text Warning Text Warning Text&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;warning&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">closable</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">@close</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;onClose&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">    /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Error Text&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">description</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Error Description Error Description Error Description Error Description Error Description Error Description&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;error&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">closable</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">@close</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;onClose&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">    /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;/</span><span style="color:#FDAEB7;font-style:italic;">Space</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">lang</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;ts&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">function</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">onClose</span><span style="color:#24292E;"> (</span><span style="color:#E36209;">e</span><span style="color:#D73A49;">:</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">MouseEvent</span><span style="color:#24292E;">) {</span></span>
<span class="line"><span style="color:#24292E;">  console.</span><span style="color:#6F42C1;">log</span><span style="color:#24292E;">(e, </span><span style="color:#032F62;">&#39;I was closed.&#39;</span><span style="color:#24292E;">)</span></span>
<span class="line"><span style="color:#24292E;">}</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#B31D28;font-style:italic;">Space</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">direction</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;vertical&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">align</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;stretch&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">style</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;width: 100%&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Warning Text Warning Text Warning Text Warning Text Warning Text Warning Text Warning Text&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;warning&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">closable</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">@close</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;onClose&quot;</span></span>
<span class="line"><span style="color:#24292E;">    /&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Error Text&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">description</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Error Description Error Description Error Description Error Description Error Description Error Description&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;error&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">closable</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">@close</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;onClose&quot;</span></span>
<span class="line"><span style="color:#24292E;">    /&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;/</span><span style="color:#B31D28;font-style:italic;">Space</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div></details><h2 id="辅助性文字介绍" tabindex="-1">辅助性文字介绍 <a class="header-anchor" href="#辅助性文字介绍" aria-label="Permalink to &quot;辅助性文字介绍&quot;">​</a></h2><div class="m-space vertical stretch wrap" style="width:100%;gap:8px;margin-bottom:-0px;" data-v-15e6c265><!--[--><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert success width-description" data-v-e2a4ec13><!----><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Success Text<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[--><p> Success Description <span style="color:red;">Success</span> Description Success Description </p><!--]--></div></div><!----></div></div><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert info width-description" data-v-e2a4ec13><!----><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Info Text<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[-->Info Description Info Description Info Description Info Description<!--]--></div></div><!----></div></div><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert warning width-description" data-v-e2a4ec13><!----><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Warning Text<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[-->Warning Description Warning Description Warning Description Warning Description<!--]--></div></div><!----></div></div><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert error width-description" data-v-e2a4ec13><!----><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Error Text<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[-->Error Description Error Description Error Description Error Description<!--]--></div></div><!----></div></div><!--]--></div><details class="details custom-block"><summary>Show Code</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#FDAEB7;font-style:italic;">Space</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">direction</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;vertical&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">align</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;stretch&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">style</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;width: 100%&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Success Text&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;success&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">      &lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">description</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">        &lt;</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">          Success Description</span></span>
<span class="line"><span style="color:#E1E4E8;">          &lt;</span><span style="color:#85E89D;">span</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">style</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;color: red&quot;</span><span style="color:#E1E4E8;">&gt;Success&lt;/</span><span style="color:#85E89D;">span</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">          Description Success Description</span></span>
<span class="line"><span style="color:#E1E4E8;">        &lt;/</span><span style="color:#85E89D;">p</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">      &lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;/</span><span style="color:#FDAEB7;font-style:italic;">Alert</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Info Text&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">description</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Info Description Info Description Info Description Info Description&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;info&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">    /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Warning Text&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">description</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Warning Description Warning Description Warning Description Warning Description&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;warning&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">    /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Error Text&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">description</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Error Description Error Description Error Description Error Description&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;error&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">    /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;/</span><span style="color:#FDAEB7;font-style:italic;">Space</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#B31D28;font-style:italic;">Space</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">direction</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;vertical&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">align</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;stretch&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">style</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;width: 100%&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Success Text&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;success&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">      &lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">description</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">        &lt;</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">          Success Description</span></span>
<span class="line"><span style="color:#24292E;">          &lt;</span><span style="color:#22863A;">span</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">style</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;color: red&quot;</span><span style="color:#24292E;">&gt;Success&lt;/</span><span style="color:#22863A;">span</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">          Description Success Description</span></span>
<span class="line"><span style="color:#24292E;">        &lt;/</span><span style="color:#22863A;">p</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">      &lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;/</span><span style="color:#B31D28;font-style:italic;">Alert</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Info Text&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">description</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Info Description Info Description Info Description Info Description&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;info&quot;</span></span>
<span class="line"><span style="color:#24292E;">    /&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Warning Text&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">description</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Warning Description Warning Description Warning Description Warning Description&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;warning&quot;</span></span>
<span class="line"><span style="color:#24292E;">    /&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Error Text&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">description</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Error Description Error Description Error Description Error Description&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;error&quot;</span></span>
<span class="line"><span style="color:#24292E;">    /&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;/</span><span style="color:#B31D28;font-style:italic;">Space</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div></details><h2 id="辅助图标" tabindex="-1">辅助图标 <a class="header-anchor" href="#辅助图标" aria-label="Permalink to &quot;辅助图标&quot;">​</a></h2><div class="m-space vertical stretch wrap" style="width:100%;gap:8px;margin-bottom:-0px;" data-v-15e6c265><!--[--><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert success width-description" data-v-e2a4ec13><!--[--><span class="m-big-icon" data-v-e2a4ec13><!--[--><svg focusable="false" class="u-icon" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" data-v-e2a4ec13><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0051.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z" data-v-e2a4ec13></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" data-v-e2a4ec13></path></svg><!--]--></span><!--]--><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Success Tips<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[--><!--]--></div></div><!----></div></div><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert info width-description" data-v-e2a4ec13><!--[--><span class="m-big-icon" data-v-e2a4ec13><!--[--><svg focusable="false" class="u-icon" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" data-v-e2a4ec13><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" data-v-e2a4ec13></path><path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" data-v-e2a4ec13></path></svg><!--]--></span><!--]--><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Informational Notes<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[--><!--]--></div></div><!----></div></div><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert warning width-description" data-v-e2a4ec13><!--[--><span class="m-big-icon" data-v-e2a4ec13><!--[--><svg focusable="false" class="u-icon" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" data-v-e2a4ec13><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" data-v-e2a4ec13></path><path d="M464 688a48 48 0 1096 0 48 48 0 10-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z" data-v-e2a4ec13></path></svg><!--]--></span><!--]--><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Warning<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[--><!--]--></div></div><!----></div></div><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert error width-description" data-v-e2a4ec13><!--[--><span class="m-big-icon" data-v-e2a4ec13><!--[--><svg focusable="false" class="u-icon" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" data-v-e2a4ec13><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z" data-v-e2a4ec13></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" data-v-e2a4ec13></path></svg><!--]--></span><!--]--><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Error<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[--><!--]--></div></div><!----></div></div><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert success width-description" data-v-e2a4ec13><!--[--><span class="m-big-icon" data-v-e2a4ec13><!--[--><svg focusable="false" class="u-icon" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" data-v-e2a4ec13><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0051.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z" data-v-e2a4ec13></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" data-v-e2a4ec13></path></svg><!--]--></span><!--]--><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Success Tips<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[-->Detailed description and advices about successful copywriting.<!--]--></div></div><!----></div></div><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert info width-description" data-v-e2a4ec13><!--[--><span class="m-big-icon" data-v-e2a4ec13><!--[--><svg focusable="false" class="u-icon" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" data-v-e2a4ec13><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" data-v-e2a4ec13></path><path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" data-v-e2a4ec13></path></svg><!--]--></span><!--]--><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Informational Notes<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[-->Additional description and informations about copywriting.<!--]--></div></div><!----></div></div><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert warning width-description" data-v-e2a4ec13><!--[--><span class="m-big-icon" data-v-e2a4ec13><!--[--><svg focusable="false" class="u-icon" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" data-v-e2a4ec13><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" data-v-e2a4ec13></path><path d="M464 688a48 48 0 1096 0 48 48 0 10-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z" data-v-e2a4ec13></path></svg><!--]--></span><!--]--><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Warning<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[-->This is a warning notice about copywriting.<!--]--></div></div><!----></div></div><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert error width-description" data-v-e2a4ec13><!--[--><span class="m-big-icon" data-v-e2a4ec13><!--[--><svg focusable="false" class="u-icon" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" data-v-e2a4ec13><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z" data-v-e2a4ec13></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" data-v-e2a4ec13></path></svg><!--]--></span><!--]--><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Error<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[-->This is an error message about copywriting.<!--]--></div></div><!----></div></div><!--]--></div><details class="details custom-block"><summary>Show Code</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#FDAEB7;font-style:italic;">Space</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">direction</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;vertical&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">align</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;stretch&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">style</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;width: 100%&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Success Tips&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;success&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">show-icon</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Informational Notes&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;info&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">show-icon</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Warning&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;warning&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">show-icon</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Error&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;error&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">show-icon</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Success Tips&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">description</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Detailed description and advices about successful copywriting.&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;success&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">show-icon</span></span>
<span class="line"><span style="color:#E1E4E8;">    /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Informational Notes&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">description</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Additional description and informations about copywriting.&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;info&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">show-icon</span></span>
<span class="line"><span style="color:#E1E4E8;">    /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Warning&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">description</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;This is a warning notice about copywriting.&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;warning&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">show-icon</span></span>
<span class="line"><span style="color:#E1E4E8;">    /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Error&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">description</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;This is an error message about copywriting.&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;error&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">show-icon</span></span>
<span class="line"><span style="color:#E1E4E8;">    /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;/</span><span style="color:#FDAEB7;font-style:italic;">Space</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#B31D28;font-style:italic;">Space</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">direction</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;vertical&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">align</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;stretch&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">style</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;width: 100%&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Success Tips&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;success&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">show-icon</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Informational Notes&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;info&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">show-icon</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Warning&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;warning&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">show-icon</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Error&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;error&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">show-icon</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Success Tips&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">description</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Detailed description and advices about successful copywriting.&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;success&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">show-icon</span></span>
<span class="line"><span style="color:#24292E;">    /&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Informational Notes&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">description</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Additional description and informations about copywriting.&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;info&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">show-icon</span></span>
<span class="line"><span style="color:#24292E;">    /&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Warning&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">description</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;This is a warning notice about copywriting.&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;warning&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">show-icon</span></span>
<span class="line"><span style="color:#24292E;">    /&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Error&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">description</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;This is an error message about copywriting.&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;error&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">show-icon</span></span>
<span class="line"><span style="color:#24292E;">    /&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;/</span><span style="color:#B31D28;font-style:italic;">Space</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div></details><h2 id="自定义关闭文字" tabindex="-1">自定义关闭文字 <a class="header-anchor" href="#自定义关闭文字" aria-label="Permalink to &quot;自定义关闭文字&quot;">​</a></h2><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert info width-description" data-v-e2a4ec13><!----><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Info Text<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[--><!--]--></div></div><a class="m-close" data-v-e2a4ec13><!--[--><span data-v-e2a4ec13>Close Now</span><!--]--></a></div></div><details class="details custom-block"><summary>Show Code</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Info Text&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;info&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">closable</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">close-text</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Close Now&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Info Text&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;info&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">closable</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">close-text</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Close Now&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div></details><h2 id="自定义图标" tabindex="-1">自定义图标 <a class="header-anchor" href="#自定义图标" aria-label="Permalink to &quot;自定义图标&quot;">​</a></h2><div class="m-space vertical stretch wrap" style="width:100%;gap:8px;margin-bottom:-0px;" data-v-15e6c265><!--[--><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert success width-description" data-v-e2a4ec13><!--[--><span class="m-big-icon" data-v-e2a4ec13><!--[--><svg focusable="false" class="u-icon" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg><!--]--></span><!--]--><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Success Tips<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[--><!--]--></div></div><!----></div></div><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert info width-description" data-v-e2a4ec13><!--[--><span class="m-big-icon" data-v-e2a4ec13><!--[--><svg focusable="false" class="u-icon" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg><!--]--></span><!--]--><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Informational Notes<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[--><!--]--></div></div><!----></div></div><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert warning width-description" data-v-e2a4ec13><!--[--><span class="m-big-icon" data-v-e2a4ec13><!--[--><svg focusable="false" class="u-icon" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg><!--]--></span><!--]--><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Warning<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[--><!--]--></div></div><!----></div></div><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert error width-description" data-v-e2a4ec13><!--[--><span class="m-big-icon" data-v-e2a4ec13><!--[--><svg focusable="false" class="u-icon" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"></path></svg><!--]--></span><!--]--><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Error<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[--><!--]--></div></div><!----></div></div><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert success width-description" data-v-e2a4ec13><!--[--><span class="m-big-icon" data-v-e2a4ec13><!--[--><img src="https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg" class="u-big-icon-img" data-v-e2a4ec13><!--]--></span><!--]--><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Success<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[--><!--]--></div></div><!----></div></div><div class="m-alert-wrapper" data-v-e2a4ec13><div class="m-alert success width-description" data-v-e2a4ec13><!--[--><span class="m-big-icon" data-v-e2a4ec13><!--[--><img src="https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg" class="u-big-icon-img" data-v-e2a4ec13><!--]--></span><!--]--><div class="m-content" data-v-e2a4ec13><div class="u-message" data-v-e2a4ec13><!--[-->Success Tips<!--]--></div><div class="u-description" data-v-e2a4ec13><!--[-->Detailed description and advices about successful copywriting.<!--]--></div></div><!----></div></div><!--]--></div><details class="details custom-block"><summary>Show Code</summary><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;</span><span style="color:#FDAEB7;font-style:italic;">Space</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">direction</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;vertical&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">align</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;stretch&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">style</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;width: 100%&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Success Tips&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;success&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">show-icon</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">      &lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">icon</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">        &lt;</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">focusable</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;false&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;u-icon&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">data-icon</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;smile&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">width</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;1em&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">height</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;1em&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;currentColor&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">aria-hidden</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;true&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">viewBox</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;64 64 896 896&quot;</span><span style="color:#E1E4E8;">&gt;&lt;</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">d</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">      &lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;/</span><span style="color:#FDAEB7;font-style:italic;">Alert</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Informational Notes&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;info&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">show-icon</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">      &lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">icon</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">        &lt;</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">focusable</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;false&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;u-icon&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">data-icon</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;smile&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">width</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;1em&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">height</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;1em&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;currentColor&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">aria-hidden</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;true&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">viewBox</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;64 64 896 896&quot;</span><span style="color:#E1E4E8;">&gt;&lt;</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">d</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">      &lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;/</span><span style="color:#FDAEB7;font-style:italic;">Alert</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Warning&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;warning&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">show-icon</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">      &lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">icon</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">        &lt;</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">focusable</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;false&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;u-icon&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">data-icon</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;smile&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">width</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;1em&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">height</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;1em&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;currentColor&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">aria-hidden</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;true&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">viewBox</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;64 64 896 896&quot;</span><span style="color:#E1E4E8;">&gt;&lt;</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">d</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">      &lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;/</span><span style="color:#FDAEB7;font-style:italic;">Alert</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Error&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;error&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">show-icon</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">      &lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">icon</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">        &lt;</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">focusable</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;false&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;u-icon&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">data-icon</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;smile&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">width</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;1em&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">height</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;1em&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;currentColor&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">aria-hidden</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;true&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">viewBox</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;64 64 896 896&quot;</span><span style="color:#E1E4E8;">&gt;&lt;</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">d</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z&quot;</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;">&gt;&lt;/</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">      &lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;/</span><span style="color:#FDAEB7;font-style:italic;">Alert</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Success&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;success&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">icon</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">show-icon</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;/</span><span style="color:#FDAEB7;font-style:italic;">Alert</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">    &lt;</span><span style="color:#FDAEB7;font-style:italic;">Alert</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">message</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Success Tips&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">description</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;Detailed description and advices about successful copywriting.&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">type</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;success&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">icon</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg&quot;</span></span>
<span class="line"><span style="color:#E1E4E8;">      </span><span style="color:#B392F0;">show-icon</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">  &lt;/</span><span style="color:#FDAEB7;font-style:italic;">Space</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;</span><span style="color:#B31D28;font-style:italic;">Space</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">direction</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;vertical&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">align</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;stretch&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">style</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;width: 100%&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Success Tips&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;success&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">show-icon</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">      &lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">icon</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">        &lt;</span><span style="color:#22863A;">svg</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">focusable</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;false&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;u-icon&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">data-icon</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;smile&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">width</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;1em&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">height</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;1em&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;currentColor&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">aria-hidden</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;true&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">viewBox</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;64 64 896 896&quot;</span><span style="color:#24292E;">&gt;&lt;</span><span style="color:#22863A;">path</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">d</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z&quot;</span><span style="color:#24292E;">&gt;&lt;/</span><span style="color:#22863A;">path</span><span style="color:#24292E;">&gt;&lt;/</span><span style="color:#22863A;">svg</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">      &lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;/</span><span style="color:#B31D28;font-style:italic;">Alert</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Informational Notes&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;info&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">show-icon</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">      &lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">icon</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">        &lt;</span><span style="color:#22863A;">svg</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">focusable</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;false&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;u-icon&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">data-icon</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;smile&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">width</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;1em&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">height</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;1em&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;currentColor&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">aria-hidden</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;true&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">viewBox</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;64 64 896 896&quot;</span><span style="color:#24292E;">&gt;&lt;</span><span style="color:#22863A;">path</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">d</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z&quot;</span><span style="color:#24292E;">&gt;&lt;/</span><span style="color:#22863A;">path</span><span style="color:#24292E;">&gt;&lt;/</span><span style="color:#22863A;">svg</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">      &lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;/</span><span style="color:#B31D28;font-style:italic;">Alert</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Warning&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;warning&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">show-icon</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">      &lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">icon</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">        &lt;</span><span style="color:#22863A;">svg</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">focusable</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;false&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;u-icon&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">data-icon</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;smile&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">width</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;1em&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">height</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;1em&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;currentColor&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">aria-hidden</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;true&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">viewBox</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;64 64 896 896&quot;</span><span style="color:#24292E;">&gt;&lt;</span><span style="color:#22863A;">path</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">d</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z&quot;</span><span style="color:#24292E;">&gt;&lt;/</span><span style="color:#22863A;">path</span><span style="color:#24292E;">&gt;&lt;/</span><span style="color:#22863A;">svg</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">      &lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;/</span><span style="color:#B31D28;font-style:italic;">Alert</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Error&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;error&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">show-icon</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">      &lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">icon</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">        &lt;</span><span style="color:#22863A;">svg</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">focusable</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;false&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;u-icon&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">data-icon</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;smile&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">width</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;1em&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">height</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;1em&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;currentColor&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">aria-hidden</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;true&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">viewBox</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;64 64 896 896&quot;</span><span style="color:#24292E;">&gt;&lt;</span><span style="color:#22863A;">path</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">d</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z&quot;</span><span style="color:#24292E;">&gt;&lt;/</span><span style="color:#22863A;">path</span><span style="color:#24292E;">&gt;&lt;/</span><span style="color:#22863A;">svg</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">      &lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;/</span><span style="color:#B31D28;font-style:italic;">Alert</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Success&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;success&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">icon</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">show-icon</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;/</span><span style="color:#B31D28;font-style:italic;">Alert</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">    &lt;</span><span style="color:#B31D28;font-style:italic;">Alert</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">message</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Success Tips&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">description</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;Detailed description and advices about successful copywriting.&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">type</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;success&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">icon</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.3/1.jpg&quot;</span></span>
<span class="line"><span style="color:#24292E;">      </span><span style="color:#6F42C1;">show-icon</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">  &lt;/</span><span style="color:#B31D28;font-style:italic;">Space</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span></code></pre></div></details><h2 id="apis" tabindex="-1">APIs <a class="header-anchor" href="#apis" aria-label="Permalink to &quot;APIs&quot;">​</a></h2><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th><th>必传</th></tr></thead><tbody><tr><td>message</td><td>警告提示内容</td><td>string | slot</td><td>&#39;&#39;</td><td>false</td></tr><tr><td>description</td><td>警告提示的辅助性文字介绍</td><td>string | slot</td><td>&#39;&#39;</td><td>false</td></tr><tr><td>type</td><td>指定警告提示的样式，有四种选择 <code>success</code>、<code>info</code>、<code>warning</code>、<code>error</code></td><td>&#39;success&#39; | &#39;info&#39; | &#39;warning&#39; | &#39;error&#39;</td><td>&#39;info&#39;</td><td>false</td></tr><tr><td>closable</td><td>是否显示关闭按钮</td><td>boolean</td><td>false</td><td>false</td></tr><tr><td>closeText</td><td>自定义关闭按钮</td><td>string | slot</td><td>&#39;&#39;</td><td>false</td></tr><tr><td>icon</td><td>自定义图标，<code>showIcon</code> 为 <code>true</code> 时有效</td><td>string | slot</td><td>&#39;&#39;</td><td>false</td></tr><tr><td>showIcon</td><td>是否显示辅助图标</td><td>boolean</td><td>false</td><td>false</td></tr></tbody></table><h2 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h2><table><thead><tr><th>事件名称</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>close</td><td>关闭时触发的回调函数</td><td>(e: MouseEvent) =&gt; void</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><div class="edit-info" data-v-ef5dee53><div class="edit-link" data-v-ef5dee53><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/themusecatcher/vue-amazing-ui/tree/master/docs/guide/components/alert.md" target="_blank" rel="noreferrer" data-v-ef5dee53><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-ef5dee53><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Suggest changes to this page<!--]--></a></div><!----></div><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/vue-amazing-ui/guide/started.html" data-v-ef5dee53><span class="desc" data-v-ef5dee53>Previous page</span><span class="title" data-v-ef5dee53>快速上手</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/vue-amazing-ui/guide/components/avatar.html" data-v-ef5dee53><span class="desc" data-v-ef5dee53>Next page</span><span class="title" data-v-ef5dee53>头像 Avatar</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5a346dfe data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the MIT License.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023-present The Muse Catcher</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_components_backtop.md\":\"8d59e5ad\",\"guide_components_alert.md\":\"ef6f8f48\",\"guide_components_breadcrumb.md\":\"482c3bc5\",\"guide_components_button.md\":\"0c5a0f79\",\"guide_components_carousel.md\":\"f258fe6f\",\"guide_components_card.md\":\"c68e6a5f\",\"guide_components_avatar.md\":\"7b3c0a95\",\"guide_components_badge.md\":\"7b61433a\",\"guide_components_collapse.md\":\"17577606\",\"guide_components_countdown.md\":\"8a4c2a3b\",\"guide_components_checkbox.md\":\"74f90463\",\"guide_components_divider.md\":\"75f2a0ba\",\"guide_components_cascader.md\":\"c8c329e6\",\"guide_components_ellipsis.md\":\"5287e379\",\"guide_components_descriptions.md\":\"afc14b99\",\"guide_components_drawer.md\":\"314b39d8\",\"guide_components_dialog.md\":\"768a622b\",\"guide_components_empty.md\":\"25520a92\",\"guide_components_datepicker.md\":\"5bc2ac50\",\"guide_components_flex.md\":\"d5bf2ccc\",\"guide_components_image.md\":\"0d11985e\",\"guide_components_message.md\":\"ee3fe55f\",\"guide_components_inputnumber.md\":\"97dfa1e5\",\"guide_components_modal.md\":\"bb094a92\",\"guide_components_notification.md\":\"53828092\",\"guide_components_numberanimation.md\":\"d76aa659\",\"guide_components_pagination.md\":\"0e67ccb2\",\"guide_components_input.md\":\"879a0fdf\",\"guide_components_grid.md\":\"2aab247d\",\"guide_components_qrcode.md\":\"a9bd1de1\",\"guide_components_popconfirm.md\":\"53774e5a\",\"guide_components_progress.md\":\"1c392827\",\"guide_components_radio.md\":\"27776e2a\",\"guide_components_rate.md\":\"69bc8cbd\",\"guide_components_result.md\":\"20535c7d\",\"guide_components_slider.md\":\"e58e30ce\",\"guide_components_space.md\":\"462fecd4\",\"guide_components_spin.md\":\"1299524e\",\"guide_components_select.md\":\"a8f1273f\",\"guide_components_steps.md\":\"ce8cdf58\",\"guide_components_statistic.md\":\"e51cdb04\",\"guide_components_swiper.md\":\"dbec3821\",\"guide_components_switch.md\":\"b970eb36\",\"guide_components_table.md\":\"58ff62a3\",\"guide_components_tabs.md\":\"c13abd94\",\"guide_components_textscroll.md\":\"910fdfb7\",\"guide_components_textarea.md\":\"586a2e33\",\"guide_components_tooltip.md\":\"b326ce75\",\"guide_components_timeline.md\":\"bacde90b\",\"guide_features.md\":\"79a293f3\",\"guide_components_tag.md\":\"d024f080\",\"guide_components_video.md\":\"3b23c86a\",\"guide_components_waterfall.md\":\"944087ee\",\"guide_started.md\":\"d0e94266\",\"index.md\":\"579e0bbd\",\"guide_components_upload.md\":\"9fbaefaa\",\"utils_add.md\":\"76c759f5\",\"utils_animation-frame.md\":\"9b0fe9ed\",\"utils_debounce.md\":\"3cccfb14\",\"utils_download-file.md\":\"dda24646\",\"utils_format-number.md\":\"17b9bf84\",\"utils_date-format.md\":\"31801aa3\",\"utils_started.md\":\"2223b04f\",\"utils_throttle.md\":\"4975c126\",\"utils_raf-timeout.md\":\"8fcee01e\",\"utils_toggle-dark.md\":\"324c6a33\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Vue Amazing UI\",\"description\":\"Amazing UI 组件库\",\"base\":\"/vue-amazing-ui/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"logo\":\"/amazing-icon.svg\",\"editLink\":{\"pattern\":\"https://github.com/themusecatcher/vue-amazing-ui/tree/master/docs/:path\",\"text\":\"Suggest changes to this page\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/themusecatcher/vue-amazing-ui\"}],\"algolia\":{\"appId\":\"SHDNEYGA8Z\",\"apiKey\":\"91419401b0b0efd31b610e54e5b97249\",\"indexName\":\"vue-amazing-ui\"},\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2023-present The Muse Catcher\"},\"nav\":[{\"text\":\"组件\",\"link\":\"/guide/features\",\"activeMatch\":\"/guide/\"},{\"text\":\"工具\",\"link\":\"/utils/started\",\"activeMatch\":\"/utils/\"},{\"text\":\"链接\",\"items\":[{\"text\":\"My Github\",\"link\":\"https://github.com/themusecatcher\"},{\"text\":\"My CSDN\",\"link\":\"https://blog.csdn.net/Dandrose?type=blog\"},{\"text\":\"Front-end Notes\",\"link\":\"https://themusecatcher.github.io/front-end-notes/\"},{\"items\":[{\"text\":\"vue\",\"link\":\"https://cn.vuejs.org/\"},{\"text\":\"vitepress\",\"link\":\"https://vitepress.dev/\"},{\"text\":\"markdown\",\"link\":\"https://markdown.com.cn/\"}]}]}],\"sidebar\":{\"/guide/\":[{\"text\":\"指引\",\"items\":[{\"text\":\"特性\",\"link\":\"/guide/features\"},{\"text\":\"快速上手\",\"link\":\"/guide/started\"}]},{\"text\":\"组件\",\"items\":[{\"text\":\"警告提示 Alert\",\"link\":\"/guide/components/alert\"},{\"text\":\"头像 Avatar\",\"link\":\"/guide/components/avatar\"},{\"text\":\"回到顶部 BackTop\",\"link\":\"/guide/components/backtop\"},{\"text\":\"徽标数 Badge\",\"link\":\"/guide/components/badge\"},{\"text\":\"面包屑 Breadcrumb\",\"link\":\"/guide/components/breadcrumb\"},{\"text\":\"按钮 Button\",\"link\":\"/guide/components/button\"},{\"text\":\"卡片 Card\",\"link\":\"/guide/components/card\"},{\"text\":\"走马灯 Carousel\",\"link\":\"/guide/components/carousel\"},{\"text\":\"级联选择 Cascader\",\"link\":\"/guide/components/cascader\"},{\"text\":\"多选框 Checkbox\",\"link\":\"/guide/components/checkbox\"},{\"text\":\"折叠面板 Collapse\",\"link\":\"/guide/components/collapse\"},{\"text\":\"倒计时 Countdown\",\"link\":\"/guide/components/countdown\"},{\"text\":\"日期选择 DatePicker\",\"link\":\"/guide/components/datepicker\"},{\"text\":\"描述列表 Descriptions\",\"link\":\"/guide/components/descriptions\"},{\"text\":\"对话框 Dialog\",\"link\":\"/guide/components/dialog\"},{\"text\":\"分割线 Divider\",\"link\":\"/guide/components/divider\"},{\"text\":\"抽屉 Drawer\",\"link\":\"/guide/components/drawer\"},{\"text\":\"文本省略 Ellipsis\",\"link\":\"/guide/components/ellipsis\"},{\"text\":\"空状态 Empty\",\"link\":\"/guide/components/empty\"},{\"text\":\"弹性布局 Flex\",\"link\":\"/guide/components/flex\"},{\"text\":\"栅格 Grid\",\"link\":\"/guide/components/grid\"},{\"text\":\"图片 Image\",\"link\":\"/guide/components/image\"},{\"text\":\"输入框 Input\",\"link\":\"/guide/components/input\"},{\"text\":\"数字输入框 InputNumber\",\"link\":\"/guide/components/inputnumber\"},{\"text\":\"全局提示 Message\",\"link\":\"/guide/components/message\"},{\"text\":\"信息提示 Modal\",\"link\":\"/guide/components/modal\"},{\"text\":\"通知提醒 Notification\",\"link\":\"/guide/components/notification\"},{\"text\":\"数值动画 NumberAnimation\",\"link\":\"/guide/components/numberanimation\"},{\"text\":\"分页 Pagination\",\"link\":\"/guide/components/pagination\"},{\"text\":\"弹出确认 Popconfirm\",\"link\":\"/guide/components/popconfirm\"},{\"text\":\"进度条 Progress\",\"link\":\"/guide/components/progress\"},{\"text\":\"二维码 QRCode\",\"link\":\"/guide/components/qrcode\"},{\"text\":\"单选框 Radio\",\"link\":\"/guide/components/radio\"},{\"text\":\"评分 Rate\",\"link\":\"/guide/components/rate\"},{\"text\":\"结果 Result\",\"link\":\"/guide/components/result\"},{\"text\":\"选择器 Select\",\"link\":\"/guide/components/select\"},{\"text\":\"滑动输入条 Slider\",\"link\":\"/guide/components/slider\"},{\"text\":\"间距 Space\",\"link\":\"/guide/components/space\"},{\"text\":\"加载中 Spin\",\"link\":\"/guide/components/spin\"},{\"text\":\"统计数值 Statistic\",\"link\":\"/guide/components/statistic\"},{\"text\":\"步骤条 Steps\",\"link\":\"/guide/components/steps\"},{\"text\":\"触摸滑动插件 Swiper\",\"link\":\"/guide/components/swiper\"},{\"text\":\"开关 Switch\",\"link\":\"/guide/components/switch\"},{\"text\":\"表格 Table\",\"link\":\"/guide/components/table\"},{\"text\":\"标签页 Tabs\",\"link\":\"/guide/components/tabs\"},{\"text\":\"标签 Tag\",\"link\":\"/guide/components/tag\"},{\"text\":\"文本域 Textarea\",\"link\":\"/guide/components/textarea\"},{\"text\":\"文字滚动 TextScroll\",\"link\":\"/guide/components/textscroll\"},{\"text\":\"时间轴 Timeline\",\"link\":\"/guide/components/timeline\"},{\"text\":\"文字提示 Tooltip\",\"link\":\"/guide/components/tooltip\"},{\"text\":\"上传 Upload\",\"link\":\"/guide/components/upload\"},{\"text\":\"播放器 Video\",\"link\":\"/guide/components/video\"},{\"text\":\"瀑布流 Waterfall\",\"link\":\"/guide/components/waterfall\"}]}],\"/utils/\":[{\"text\":\"指引\",\"items\":[{\"text\":\"快速上手\",\"link\":\"/utils/started\"}]},{\"text\":\"工具\",\"items\":[{\"text\":\"add 加法\",\"link\":\"/utils/add\"},{\"text\":\"raf 动画帧\",\"link\":\"/utils/animation-frame\"},{\"text\":\"date 日期格式化\",\"link\":\"/utils/date-format\"},{\"text\":\"debounce 防抖\",\"link\":\"/utils/debounce\"},{\"text\":\"downloadFile 下载文件\",\"link\":\"/utils/download-file\"},{\"text\":\"formatNumber 数字格式化\",\"link\":\"/utils/format-number\"},{\"text\":\"raf 定时器\",\"link\":\"/utils/raf-timeout\"},{\"text\":\"throttle 节流\",\"link\":\"/utils/throttle\"},{\"text\":\"toggleDark 切换暗黑\",\"link\":\"/utils/toggle-dark\"}]}]}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}");</script>
    
  </body>
</html>